<template>
	<div id="navbar">
		<div id="nav">
			<!--
			 声明式导航  点击那个就跳转到哪里
			 我们使用<router-link  to="/path"></router-link>
			 -->
			<ul>
				<li>

					<img src="../../assets/img/fxyy.png">

					<router-link to="/discovery" class="link" :class="{active:isTrue}">发现音乐</router-link>
				</li>
				<li>
					<img src="../../assets/img/zx.png">
					<router-link to="/songs" class="link">最新音乐</router-link>
				</li>
				<li>
					<img src="../../assets/img/tjgd.png">
					<router-link to="/playLists" class="link">推荐歌单</router-link>


				</li>
				<li>
					<img src="../../assets/img/mv.png">
					<router-link to="/mvs" class="link">最新MV</router-link>
				</li>
			</ul>
		</div>
		<div id="main">
			<!-- 路由的出口  地址命中之后  把组件显示的位置 -->
			<!-- <discovery></discovery> -->
			<router-view></router-view>
			<div id="player">
				<audio :src="musicUrl" controls="controls" autoplay="">

				</audio>
			</div>
		</div>

	</div>
</template>

<script>
	import Discovery from './Discovery.vue'

	export default {
		name: 'NavBar',
		components: {
			Discovery
		},
		data() {
			return {
				musicUrl: '',
				isTrue: true
			}
		},
		methods: {}
	}
</script>

<style scoped="scoped">
	audio {
		width: 1250px;
	}

	#navbar {
		height: 850px;
		display: flex;
	}

	#nav ul li {
		list-style: none;
		padding: 20px;

	}

	#nav ul li img {
		width: 30px;
		height: 30px;
		padding-right: 20px;
	}

	#nav ul li .link {
		text-decoration: none;
		font-size: 20px;
	}

	#nav {
		width: 230px;
		background-color: #ededed;

	}

	#nav ul li .link:link {
		color: #000000;
	}

	/* 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

注意： 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

注意：伪类的名称不区分大小写。 */
	/* 未访问链接*/
	#nav ul li .link:visited {
		color: black;
	}

	/* 已访问链接 */
	#nav ul li .link:hover {
		color: red;
	}

	/* 鼠标移动到链接上 */
	#nav ul li .link:active {
		color: red;
	}

	/* 鼠标点击时 */

	#main {

		flex: 1;
		overflow-y: auto;
		overflow-x: hidden;
		/* 使用剩余的大小 */
	}
</style>
